<template>
<div class="menuDiv" >
  <van-tabbar v-model="active" fixed route  @change="onChange">
    <van-tabbar-item replace :to="{path: '/', query: {userid: userid}}">
      <span>首页</span>
      <template #icon="props">
        <img :src="props.active ? icon1.active : icon1.inactive" />
      </template>
    </van-tabbar-item>

<!--  消息  -->
    <van-tabbar-item replace :to="{path: '/news', query: {userid: userid}}" @click="clickxiaoxi()">
      <span>消息</span>
      <template #icon="props">
        <img :src="props.active ? icon2.active : icon2.inactive" />
      </template>
    </van-tabbar-item>

<!--  资讯  -->
    <van-tabbar-item replace @click="clickZixun">
      <span>资讯</span>
      <template #icon="props">
        <img :src="props.active ? icon3.active : icon3.inactive" />
      </template>
    </van-tabbar-item>

<!-- 我的   -->
    <van-tabbar-item replace :to="{path: '/my', query: {userid: userid}}" >
<!--      @click="myClick()"-->
      <span>我的</span>
      <template #icon="props">
        <img :src="props.active ? icon4.active : icon4.inactive" />
      </template>
    </van-tabbar-item>
  </van-tabbar>
</div>
</template>

<script>
// import {Notify} from 'vant'
import videoHttp from '../../http/video.http'
import {Toast} from 'vant'
export default {
  name: 'ListMenu',
  props: ['id'],
  data () {
    return {
      http: videoHttp.Http,
      active: 0,
      userid: '',
      icon1: {
        active: require('../../assets/首页选中@2x.png'), // 选中图标
        inactive: require('../../assets/首页未选中@2x.png') // 未选中图标
      },
      icon2: {
        active: require('../../assets/消息选中@2x.png'), // 选中图标
        inactive: require('../../assets/消息未选中@2x.png') // 未选中图标
      },
      icon3: {
        active: require('../../assets/资讯选中@2x.png'), // 选中图标
        inactive: require('../../assets/资讯未选中@2x.png') // 未选中图标
      },
      icon4: {
        active: require('../../assets/我的选中@2x.png'), // 选中图标
        inactive: require('../../assets/我的未选中@2x.png') // 未选中图标
      },
      menuArr: [
        {
          name: '首页',
          icon: {
            active: require('../../assets/首页选中@2x.png'), // 选中图标
            inactive: require('../../assets/首页未选中@2x.png') // 未选中图标
          },
          path: '/home'
        },
        {
          name: '消息',
          icon: {
            active: require('../../assets/消息选中@2x.png'), // 选中图标
            inactive: require('../../assets/消息未选中@2x.png') // 未选中图标
          },
          path: '/news'
        },
        {
          name: '资讯',
          icon: {
            active: require('../../assets/资讯选中@2x.png'), // 选中图标
            inactive: require('../../assets/资讯未选中@2x.png') // 未选中图标
          },
          path: '/message'
        },
        {
          name: '我的',
          icon: {
            active: require('../../assets/我的选中@2x.png'), // 选中图标
            inactive: require('../../assets/我的未选中@2x.png') // 未选中图标
          },
          path: '/my'
        }
      ]
    }
  },
  mounted () {
    // 截取网址后的userid
    // this.userid = this.$utils.getUrlKey('userid')
    if (sessionStorage.getItem('userid') !== null && sessionStorage.getItem('userid') !== undefined && sessionStorage.getItem('userid') !== '') {
      this.userid = sessionStorage.getItem('userid')
    }
  },
  methods: {
    onChange (index) {
      // if (index === 3) {
      //   console.log(index)
      //   // 跳转1 http://kanghdj.com/
      //   // window.location.href = this.http + 'kfhl/miniindex/my.do?userid=' + this.userid
      //   window.location.href = '../../../kfhl/miniindex/my.do?userid=' + this.userid
      // }
      // Notify({ type: 'primary', message: index })
    },
    clickZixun () {
      if (sessionStorage.getItem('sys') === 'ANDROID') {
        // 我的消息列表 myMessageInfo
        window.WebViewJavascriptBridge.callHandler('testData', {'param': ''}, function (responseData) {})
      } else {
        Toast('请在App上使用本功能')
      }
    },
    clickxiaoxi () {
      // console.log(this.active)
      // this.$router.push({path: '/news', query: {userid: this.userid}})
      // if (sessionStorage.getItem('sys') === 'ANDROID') {
      //   // 我的消息列表 myMessageInfo
      //   window.WebViewJavascriptBridge.callHandler('myMessageInfo', '', function (responseData) {})
      // } else {
      //   Toast('请在App上使用本功能')
      // }
    }
  }
}
</script>

<style scoped>
  *{
    margin: 0;
    padding: 0;
  }
  /*.menu{*/
  /*  width: 100vw;*/
  /*  height: 15vw;*/
  /*  box-sizing: border-box;*/
  /*  position: fixed;*/
  /*  bottom: 0;*/
  /*  background-color: #fff;*/
  /*}*/
  /*ul{*/
  /*width: 100%;*/
  /*height: 100%;*/
  /*display: flex;*/
  /*justify-content: center;*/
  /*}*/
  /*ul li{*/
  /*  width: 49%;*/
  /*  display: flex;*/
  /*  flex-direction: column;*/
  /*  align-items: center;*/
  /*  justify-content: center;*/
  /*  color: #E5E5E5;*/
  /*}*/
  /*.active{*/
  /*  font-family: PingFang SC;*/
  /*  font-weight: 500;*/
  /*  color: #333333;*/
  /*  background: linear-gradient(0deg, #1DA3F2 0%, #1DC7F2 100%);*/
  /*  -webkit-background-clip: text;*/
  /*  -webkit-text-fill-color: transparent;*/
  /*}*/
  /*ul li img{*/
  /*  width: 7vw;*/
  /*  height: 6vw;*/
  /*}*/
  /*ul li a{*/
  /*  height: 6vw;*/
  /*  display: inline-block;*/
  /*  font-size: 3vw;*/
  /*  line-height: 6vw;*/
  /*  !*background-color: antiquewhite;*!*/
  /*}*/
</style>
